<template>
  <div class="framework">
    <el-container class="h100">
      <el-header>
        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false"><i class="el-icon-s-unfold"></i></el-radio-button>
          <el-radio-button :label="true"><i class="el-icon-s-fold"></i></el-radio-button>
        </el-radio-group> -->
        <div class="shousuo">
          <span v-if="isCollapse==true" @click="isCollapse=false"><i class="el-icon-s-unfold"></i></span>
          <span v-else @click="isCollapse=true"><i class="el-icon-s-fold"></i></span>
        </div>
        <div class="logo">长水缴费系统</div>
        <div class="headerMain">
          <div class="topNav">
            <!-- vertical -->
            <div>
              <i class="el-icon-menu"></i>
              <span>分类</span>
            </div>
            <ul>
              <!-- url的一级名称'/'+$route.path.split('/')[1] 等于d.name(即一级路由名称时 被选中) -->
              <li
                v-for="d in nav"
                :key="d.url"
                :class="{'on':d.url==$route.path.split('/')[1]}"
                @click="jumpToLink(d)"
              >{{d.name}}</li>
            </ul>
          </div>
        </div>
        <!-- <div class="navBtn">
          <span>Hi {{user.realName}}</span>
          <span v-if="user.realName" @click="out" style="cursor:pointer" >退出系统</span>
        </div> -->
      </el-header>
      <el-container class="noHead">

        <el-aside v-if="sideList.length!=0 && sideNav" :style="{width:isCollapse?64+'px':200+'px'}">
          <div class="userBox">
            <el-popover
              placement="right"
              trigger="hover">
              <dl style="text-align:center">
                <dt style="font-size:15px; padding:0 0 10px; font-weight:bold;">{{user.realName}}</dt>
                <dd><el-button @click="out" size="mini" style="width:100%" type="primary">退出</el-button></dd>
              </dl>
              <!-- <el-button slot="reference">hover 激活</el-button> -->
            <div slot="reference" class="pimgBox">
              <img src="./../assets/img/regionManger.png">
            </div>
            </el-popover>
            <div class="rightBox">
              <h4>{{user.realName}}</h4>
              <p><span v-if="user.realName" @click="out" style="cursor:pointer"><i class="el-icon-switch-button" style="margin:0 5px 0 0;"></i>退出系统</span></p>
            </div>
            <div class="clear"></div>
          </div>
          <el-menu
            :default-active="$route.meta ?( $route.meta.belongTo?$route.meta.belongTo:$route.name):$route.name"
            class="el-menu-vertical-demo"
            background-color="#222c41"
            text-color="#fff"
            :unique-opened="true"
            :collapse="isCollapse"
            @select="select"
          >
            <template v-for="item in sideList">
              <!-- 二层导航 -->
              <el-submenu :index="item.url" :key="item.url" v-if="item.list.length!=0&&item.showM">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{item.name}}</span>
                </template>
                <template v-for="item1 in item.list">
                  <el-menu-item @click="changeRouter(item1.url)" :key="item1.url" :index="item1.url" v-if="item1.showMM">{{item1.name}}</el-menu-item>
                </template>
              </el-submenu>
              <!-- 一层导航 -->
              <el-menu-item :index="item.url" :key="item.url" @click="changeRouter(item.url)" v-if="item.list.length==0&&item.showM">
                <i :class="item.icon"></i>
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="framework">
            <!-- <div class="breadcrumb" v-if="sideList.length!=0">
              <i class="el-icon-caret-left" :class="{'side':!sideNav}" @click="sideNav=!sideNav" v-if="sideList.length!=0"></i>
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item @click.native="spliceCrumbs(index,item)" v-for="(item,index) in crumbs" :key="index">{{item.name}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div> -->
            <div class="p15">
              <div class="panel" ref="panel">
                <router-view ref="child"></router-view>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import navData from "./assets/navData.json";
import role from "./assets/role.json";
import Link from "../mixins/link";
export default {
  data() {
    return {
      sideNav: true,
      isCollapse:false,
      nav:navData,
      sideList: [],
      user: {
        personId: "1692",
        loginName: "15925197715",
        realName: "张天师",
        personType: 16777736,
        userType: "Group",
        classId: null,
        deptId: "8",
        unitId: "1",
        roleList: ["GroupManager"],
        maxRoleCode: "GroupManager",
        homeUrl: null,
        userCenterUrl: null,
        manager: true,
        classManager: false,
        roles: null
      },
      //各种角色的权限分配：
      roleNav: role,
      navGroup: [], //多角色可以看到的导航组
      crumbs: [] //面包屑
    };
  },
  mixins: [Link],
  created() {

  },
  mounted() {
    this.CurrentClass = this.$store.state.CurrentClass;
    // 获取侧边栏导航
    for (let i in this.nav) {
      if (this.nav[i].url == this.$route.path.split("/")[1]) {
        this.sideList = this.nav[i].list;
      }
    }
    this.$nextTick(()=>{
      this.getUserInfo();
    })
  },
  methods: {
    loadUser() {
      this.navGroup = Array.from(
        new Set(
          [].concat.apply(
            [],
            this.roleNav
              .filter(el => this.user.roleList.indexOf(el.id) > -1)
              .map(el => el.navList)
          )
        )
      );
    },
    getUserInfo() {
      if (this.$route.name == "home") {
        //如果在home页，也就是初始页的时候，默认为初始登录，重新读取用户
        this.read();
      } else {
        //其他页面，有缓存读缓存，否则重新读取用户
        if (JSON.parse(window.sessionStorage.getItem("user"))) {
          this.user = JSON.parse(window.sessionStorage.getItem("user"));
        } else {
          this.read();
        }
      }
    },
    read() {
      var that = this;
      //获取用户哪些导航有权限
      that.loadUser();
      //在读取用户信息成功后，保存store

      // let a = {
      //   personId: "1692",
      //   loginName: "15925197715",
      //   realName: "张天师1",
      //   personType: 16777736,
      //   userType: "Group",
      //   classId: null,
      //   deptId: "8",
      //   unitId: "1",
      //   roleList: ["GroupManager"],
      //   maxRoleCode: "GroupManager",
      //   homeUrl: null,
      //   userCenterUrl: null,
      //   manager: true,
      //   classManager: false,
      //   roles: null
      // };
      var a = new Object();
      that.$api.login.getUserInfo().then(res=>{
        //console.log("获取用户内容",res);
        a = res.data.result.user;
        // if(a.roleList.length==0){
        //   this.$message.warning("您的角色没有任何角色，现在赋值所有角色")
        //   a.roleList = ["GroupManager", "GroupFinance", "SchoolFinance", "SchoolManager"];
        // }
        that.saveStore(a);
        that.$store.commit("saveImgUrl", res.data.result.homeUrl);
        that.user = a;
        that.haveRoles();
      })

      // this.$api.login.getUserInfo().then(res => {
      //   //重新读取用户
      //   if (res.data.status == "SUCCESS") {
      //     this.user = res.data.result.user;
      //     this.loadUser();
      //   } else {
      //     this.$message.error(res.data.errorMessage);
      //   }
      // });
    },
    saveStore(a) {
      a.isLogin = true;
      this.$store.commit("saveuser", a);
    },
    select(rName, rNameList) {

    },
    out:function(){
      var userAgent = navigator.userAgent;
      if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") !=-1) {
          window.location.href="about:blank";
          window.close();
      } else {
          window.opener = null;
          window.open("", "_self");
          window.close();
      }
    },
    jumpToLink(item) {
      this.$router.push({ name: item.url });
      this.sideList = item.list;
    },
    haveRoles:function(){
      for(let v of this.sideList){

          for(let a of v.roles){
            if(this.$store.state.userModule.roleList.indexOf(a)>-1){
              v.showM = true;
            }
          }

          for(let b of v.list){
            for(let c of b.roles){
              if(this.$store.state.userModule.roleList.indexOf(c)>-1){
                b.showMM = true;
              }
            }
          }
      }
      console.log(this.sideList);
    }
  },
  computed: {

  }
};
</script>

<style scoped>
.el-aside{transition: width .1s;}
/* .el-menu--collapse{ transition: width .4s;} */
.el-aside .el-submenu{ border-bottom:1px solid #161e2f;}
.shousuo{ color: #FFF; font-size: 24px; margin: 0 10px 0 0;}
.shousuo span{ cursor: pointer;}
.framework >>> .el-submenu__title{ height: 46px!important; line-height: 46px!important;}
.framework >>> .el-menu-item{ height: 46px!important; line-height: 46px!important;}
.userBox{ white-space: nowrap;}
.userBox .pimgBox{ float: left; width: 40px; height: 40px; position:relative; margin: 10px 10px 10px 10px; border: 3px solid #283d6b; border-radius: 50%;}
.userBox .pimgBox img{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0;}
.userBox .rightBox{ overflow: hidden; color: #FFF;}
.userBox .rightBox h4{ font-size: 15px; padding: 10px 0 5px;}
.userBox .rightBox p{ font-size: 13px;}
</style>

